import React, { PureComponent } from 'react';
import {
  Drawer,
  Col, Row,
} from 'antd';
import { channel, financeMode, financeType, repayMode, serviceRole, status } from '../../../common/options';
import { projectType } from '../../../common/selectOption';

const pStyle = {
  fontSize: 16,
  color: 'rgba(0,0,0,0.85)',
  lineHeight: '24px',
  display: 'block',
  marginBottom: 16,
};
const DescriptionItem = ({ title, content }) => (
  <div
    style={{
      fontSize: 14,
      lineHeight: '22px',
      marginBottom: 7,
      color: 'rgba(0,0,0,0.65)',
    }}
  >
    <p
      style={{
        marginRight: 8,
        display: 'inline-block',
        color: 'rgba(0,0,0,0.85)',
      }}
    >
      {title}:
    </p>
    {content}
  </div>
);

class DrawerComponent extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { visible, onClose, applyDesc } = this.props;
    return <Drawer
      width={640}
      placement="right"
      closable={true}
      onClose={() => onClose(false, [])}
      visible={visible}
    >
      <p style={{ ...pStyle, marginBottom: 24 }}>企业名称:{applyDesc.enterpriseName}</p>

      <Row>

        <Col span={12}>
          <DescriptionItem title="企业编号" content={applyDesc.enterpriseNo}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="企业简称" content={applyDesc.shortName}/>
        </Col>
      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="融资申请编号" content={applyDesc.applyNo}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="资金渠道" content={channel.map(item => (
            item.key === applyDesc.channel ? item.value : ''
          ))}/>
        </Col>
      </Row>
      <Col span={12}>
        <DescriptionItem title="融资方式" content={financeMode.map(item => (
          item.key === applyDesc.financeMode ? item.value : ''
        ))}/>
      </Col>
      <Col span={12}>
        <DescriptionItem title="融资类型" content={financeType.map(item => (
          item.key === applyDesc.financeType ? item.value : ''
        ))}/>
      </Col>
      <Row>
        <Col span={12}>
          <DescriptionItem title="融资金额" content={applyDesc.amount} 元/>
        </Col>

        <Col span={12}>
          <DescriptionItem title="融资天数" content={applyDesc.totalDays} 天/>
        </Col>

      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="类型" content={projectType.map(item => (
            item.key === applyDesc.type ? item.value : ''
          ))}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="还款方式" content={repayMode.map(item => (
            item.key === applyDesc.repayMode ? item.value : ''
          ))}/>
        </Col>
      </Row>

      <Row>
        <Col span={12}>
          <DescriptionItem title="总服务费" content={applyDesc.totalServiceFee} 元/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="服务费承担方" content={serviceRole.map(item => (
            item.key === applyDesc.serviceRole ? item.value : ''
          ))}/>
        </Col>

      </Row>

      <Row>
        <Col span={12}>
          <DescriptionItem title="上标利率" content={applyDesc.rate}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="逾期服务费率" content={applyDesc.overdueServiceRate}/>
        </Col>

      </Row>

      <Row>
        <Col span={12}>
          <DescriptionItem title="逾期利率" content={applyDesc.overdueRate}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="服务费率(%)" content={applyDesc.serviceRate}/>
        </Col>
      </Row>
      {/*<Row>*/}
        {/*<Col span={12}>*/}
          {/*<DescriptionItem title="逾期利率" content={applyDesc.otherServiceType}/>*/}
        {/*</Col>*/}
        {/*<Col span={12}>*/}
          {/*<DescriptionItem title="服务费率(%)" content={applyDesc.otherServiceRate}/>*/}
        {/*</Col>*/}
      {/*</Row>*/}
      <Row>
        <Col span={12}>
          <DescriptionItem title="状态" content={status.map(item => (
            item.key === applyDesc.status ? item.value : ''
          ))}/>
        </Col>

      </Row>
      <Row>
        <Col span={12}>
          <DescriptionItem title="创建时间" content={applyDesc.createTime}/>
        </Col>
        <Col span={12}>
          <DescriptionItem title="申请人" content={applyDesc.createName}/>
        </Col>
      </Row>

    </Drawer>;
  }
}

export default DrawerComponent;
